<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/blog/css/video-text1.css}">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" th:href="@{/blog/css/header.css}">
    <title>EVE 空间站</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        nav li:hover {
            background-color: #8c8c8c;

        }

        p {
            color: white;
        }

        .game-title {
            font-size: 40px;
            background: rgba(220 20 60 0.5);
        }

        .page1 {
            margin-left: 10%;
            margin-right: 10%;
            background: #3F3F3F;

        }

        section {
            width: 90%;
            height: 530px;
            margin: 50px 13%;
        }

        section article {
            float: left;
            width: 20%;
            height: 530px;
            overflow: hidden;
            border-radius: 4px;
        }

        #text-a {
            background-color: #8c8c8c;
            color: white;
        }

        #text-b {
            background-color: #1f7e9a;
            color: white;
        }

        #text-c {
            background-color: #2fe2ff;
        }

        #text-d {
            background-color: #5a6268;
        }

        h1 {
            margin: 10px 10px 5px 50px;
        }

        p {
            margin: 12px 50px;
        }

        section:hover article {
            width: 15%;
        }

        section article:hover {
            width: 40%;
            overflow: visible;
        }
    </style>
</head>
<body>
<div class="bg-vd">
    <video id="video1" autoplay muted loop style="width: 100%" height="100%">
        <!--<source class="source" src="../eve空间站/video/video-text.mp4">-->
    </video>
</div>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><span>EVE空间站</span></a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a th:href="@{/index}">首页</a>
                </li>
                <li>
                    <a th:href="@{/main}">游戏资讯</a>
                </li>
                <li>
                    <a th:href="@{/}">游戏攻略</a>
                </li>
                <li>
                    <a th:href="@{/imgshow}">壁纸欣赏</a>
                </li>
                <li>
                    <a href="#">游戏工具</a>
                </li>
                </li>
                <li>
                    <a th:href="@{/login}">登录注册</a>
                </li>


            </ul>

        </div>
    </div>
</nav>
<!--游戏介绍-->
<div class="page1">
    <div class="game-title" style="color: white"> EVE的世界是什么样子</div>
    <div class="eve-info" style="margin-top: 10px; padding: 0px; height: 122px;">
        <p>《星战前夜：晨曦》（《EVE Online》）是冰岛CCP公司开发的一款PC端网游，游戏以宏大的太空为背景，
            高度融合了硬科幻元素，玩家可以驾驶各式宇宙飞船在成千上万的恒星系与未知虫洞空间中穿梭。在EVE中，
            哪怕最基础的飞船也有多种玩法——采矿、工业制造、科学研究、金融贸易、联盟战争、死亡空间、舰船PVP
            等丰富多样的玩法都是EVE的魅力所在，这里，是一个真实的宇宙！
        </p>
        <p>
            《星战前夜：晨曦》揽获了包括GDC在内的众多世界游戏大奖，曾在欧美著名游戏网站“MMORPG”中多次获得
            “世界最佳游戏”称号，其精妙绝伦的制作素质还使它被纽约现代艺术博物馆等知名展馆收录。
        </p>
    </div>
    <section>
        <article id="text-a">
            <img th:src="@{/blog/img/A.png}">
        </article>
        <article id="text-b">
            <img th:src="@{/blog/img/C.png}">
        </article>
        <article id="text-c">
            <img th:src="@{/blog/img/G.png}">
        </article>
        <article id="text-d">
            <img th:src="@{/blog/img/M.png}">
        </article>

    </section>
</div>
<script th:src="@{/blog/js/script.js}"></script>
<!--舰船介绍-->
<div class="ship">

</div>

</body>

</html>
